<template>
  <div class="suggest combground">
    <div class="container">
      <div class="comtitle">
        <h2 class="comh2">意见建议</h2>
      </div>

      <div class="content">
        <div v-if="!showSuccess" class="title">
          感谢您的关注！欢迎您提交任何意见和建议，帮助我们努力改善。
        </div>
        <div v-if="!showSuccess" class="form-wrap">
          <m-form
            ref="form"
            :model="formData"
            :rules="rules"
            label-width="80px"
            label-position="right"
            style="width: 460px"
          >
            <m-form-item prop="realname" label="姓名：">
              <m-input
                v-model="formData.realname"
                bg-color="light"
                style="width: 100%; display: inline-block"
              />
            </m-form-item>
            <m-form-item required prop="contact" label="电话：">
              <m-input
                v-model="formData.contact"
                bg-color="light"
                style="width: 100%; display: inline-block"
              />
            </m-form-item>
            <m-form-item required prop="email" label="邮箱：">
              <m-input
                v-model="formData.email"
                bg-color="light"
                style="width: 100%; display: inline-block"
              />
            </m-form-item>
            <m-form-item prop="company" label="公司：">
              <m-input
                v-model="formData.company"
                bg-color="light"
                style="width: 100%; display: inline-block"
              />
            </m-form-item>
            <m-form-item prop="position" label="职位：">
              <m-input
                v-model="formData.position"
                bg-color="light"
                style="width: 100%; display: inline-block"
              />
            </m-form-item>
            <m-form-item prop="content" label="内容：">
              <m-input
                type="textarea"
                v-model="formData.content"
                bg-color="light"
                maxlength="500"
                show-word-limit
                :autosize="{ minRows: 6 }"
                style="width: 100%; display: inline-block"
              />
            </m-form-item>
            <m-form-item style="margin-top: 50px">
              <div style="display: flex; justify-content: center">
                <m-button width="235" @click="submit">提交</m-button>
              </div>
            </m-form-item>
          </m-form>

          <div class="card">
            <div class="pic"></div>
            <div class="info">
              <div class="name">CEO邮箱</div>
              <div class="email">zhaobaozhaung@163.com</div>
            </div>
          </div>
        </div>
        <div v-else class="success">
          <img src="~/assets/images/register-success-icon.png" alt="" />
          <div class="title">提交成功</div>
          <div class="prompt">感谢您的意见与建议，我们尽快与您联系</div>
          <m-button width="235" @click="$router.push('/home')">返回首页</m-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MForm from "@/components/common/m-form/MForm"
import MFormItem from "@/components/common/m-form/MFormItem"
import { mobile, email } from "@/utils/validates"
import MInput from "@/components/common/m-input/MInput"
import MButton from "@/components/common/m-button/MButton"
import { postSuggestion } from "@/request/api"

export default {
  name: "Suggest",
  components: { MButton, MInput, MFormItem, MForm },
  data() {
    return {
      formData: {},
      rules: {
        realname: [{ required: true, message: "请输入完整", trigger: "blur" }],
        contact: [{ validator: mobile, trigger: "blur" }],
        email: [{ validator: email, trigger: "blur" }],
        content: [{ required: true, message: "请输入完整", trigger: "blur" }]
      },
      showSuccess: false
    }
  },
  methods: {
    submit() {
      // 判断用户是否登录
      if (sessionStorage.getItem("access_token")) {
        this.formData.uid = 1
      } else {
        this.formData.uid = 0
      }
      this.$refs.form.$refs.mForm.validate((valid) => {
        if (valid) {
          postSuggestion(this.formData).then((res) => {
            if (res.status == 200) {
              this.showSuccess = true
            }else {
              this.$message.error(res.message)
            }
          }).catch((err) => {
            this.$message.error(err.message)
          })
        }
      })
    }
  },
  beforeRouteLeave(to, from, next) {
    this.showSuccess = false
    next()
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.suggest {
  padding: 127px 0 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  .content {
    width: 1200px;
    padding: 65px 180px 85px 170px;
    background: #fff;
    margin-top: 50px;
    font-size: 16px;
    color: #666;

    .title {
      margin-bottom: 30px;
    }

    .form-wrap {
      position: relative;
      background-color: rgb(243, 244, 247);
      padding: 60px 20px;

      .card {
        position: absolute;
        top: 60px;
        right: 40px;
        background-color: #fff;
        padding: 15px;
        width: 300px;
        height: 80px;
        border: solid 1px #eaeaea;
        display: flex;
        align-items: center;

        .pic {
          width: 60px;
          height: 60px;
          border-radius: 60px;
          background-color: #000;
          margin-right: 15px;
        }

        .info {
          .name {
            font-size: 18px;
            margin-bottom: 10px;
          }
          .email {
            font-size: 14px;
          }
        }
      }
    }

    .success {
      background-color: rgb(243, 244, 247);
      padding: 60px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      img {
        margin-bottom: 30px;
      }

      .title {
        color: $theme-color-1;
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 15px;
      }

      .prompt {
        margin-bottom: 50px;
      }
    }
  }
}
</style>
